<template>
  <div class="space-y">
    <h2>发现附近餐厅</h2>
    <div class="search-bar" style="max-width:720px;">
      <input class="input" v-model="keyword" placeholder="搜索餐厅名称..." @keyup.enter="load" />
      <select class="input" v-model="cuisineType" @change="load">
        <option value="">所有菜系</option>
        <option v-for="type in cuisineTypes" :key="type" :value="type">{{ type }}</option>
      </select>
      <select class="input" v-model="sortBy" @change="load">
        <option value="">默认排序</option>
        <option value="rating">按评分排序</option>
        <option value="distance">按距离排序</option>
      </select>
      <select class="input" v-model="sortOrder" @change="load" v-if="sortBy">
        <option value="desc">降序</option>
        <option value="asc">升序</option>
      </select>
      <button class="btn" @click="load">搜索</button>
      <button class="btn ghost" @click="clearSearch">清空</button>
    </div>
    <div class="grid">
      <div class="card" v-for="r in restaurants" :key="r.id">
        <img :src="r.imageUrl" alt="" style="width:100%;height:150px;object-fit:cover;" class="rounded" />
        <div class="card-body">
          <div style="font-weight:700;">{{ r.name }}</div>
          <div class="muted" style="font-size:12px;">{{ r.cuisineType }} · {{ r.phone }}</div>
          <div style="margin-top:4px;">
            <span style="color: #f97316;">⭐ {{ r.rating || 0 }}</span> · 
            <span style="color: #3b82f6;">📍 {{ r.distance || 0 }}km</span>
          </div>
          <div class="row" style="margin-top:8px;">
            <a class="btn" :href="`#/restaurant/${r.id}`">查看菜单</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data(){ return { restaurants: [], keyword: '', cuisineType: '', cuisineTypes: [], sortBy: '', sortOrder: 'desc' } },
  async created(){
    await this.load()
    await this.loadCuisineTypes()
  },
  methods:{
    async load(){
      let queryParams = []
      if (this.keyword && this.keyword.trim()) {
        queryParams.push(`q=${encodeURIComponent(this.keyword.trim())}`)
      }
      if (this.cuisineType && this.cuisineType.trim()) {
        queryParams.push(`cuisine_type=${encodeURIComponent(this.cuisineType.trim())}`)
      }
      if (this.sortBy && this.sortBy.trim()) {
        queryParams.push(`sort_by=${encodeURIComponent(this.sortBy.trim())}`)
        queryParams.push(`order=${encodeURIComponent(this.sortOrder.trim())}`)
      }
      const q = queryParams.length > 0 ? `?${queryParams.join('&')}` : ''
      const res = await fetch(`/api/v1/restaurants${q}`)
      this.restaurants = await res.json()
    },
    async clearSearch(){
      this.keyword = ''
      this.cuisineType = ''
      this.sortBy = ''
      this.sortOrder = 'desc'
      await this.load()
    },
    async loadCuisineTypes(){
      try {
        // 获取所有餐厅，然后提取不重复的菜系类型
        const res = await fetch('/api/v1/restaurants')
        const allRestaurants = await res.json()
        const types = new Set()
        allRestaurants.forEach(restaurant => {
          if (restaurant.cuisineType) {
            types.add(restaurant.cuisineType)
          }
        })
        this.cuisineTypes = Array.from(types).sort()
      } catch (error) {
        console.error('加载菜系类型失败:', error)
      }
    }
  }
}
</script>


